<template>
  <div>
    <!-- 在外面遍历 -->
    <template v-for="item in children">
      <div v-if="level < 2" :key="item.id" class="wrapper">
        <div class="left">
          <el-tag
            closable
            :type="level === 0 ? '' : 'success'"
            @close="$emit('close', item)"
            >{{ item.authName }}</el-tag
          >
        </div>
        <div class="right">
          <Tags
            v-on="$listeners"
            v-if="item.children"
            :children="item.children"
            :level="level + 1"
          />
        </div>
      </div>
      <el-tag
        class="tag"
        v-else
        :key="item.id"
        closable
        type="danger"
        @close="$emit('close', item)"
        >{{ item.authName }}</el-tag
      >
    </template>
  </div>
</template>
<script>
export default {
  name: "Tags",
  props: {
    /**
     * 传递过来的数据
     */
    children: Array,
    /**
     * 层级
     */
    level: {
      type: Number,
      default: 0,
    },
  },
};
</script>
<style scoped lang="scss">
.wrapper {
  display: flex;
  border: 1px solid #eee;

  .left {
    padding: 20px 40px;
    display: flex;
    align-items: center;
    text-align: center;
  }

  .right {
    flex: 1;
    display: flex;
    align-items: center;
  }

  .tag {
    margin: 15px;
  }
}
</style>